<!-- 下拉选择组件 -->
<template>
    <Select v-model="content" :placeholder="props.setConfig.placeholder ? props.setConfig.placeholder : '请选择'"
        :multiple="props.setConfig.multiple" :disabled="props.setConfig.disabled" clearable @on-change="changeValue">
        <Option v-for="item in props.setConfig.optionList" :value="item.value" :key="item.value">{{ item.label }}
        </Option>
    </Select>
</template>

<script setup>
import { ref } from 'vue';

/**
 * @param {
 *      setConfig: {
 *          optionType: '选项类型', // dynamic 自定义选项, request 请求选项
 *          requestUrl: '请求地址', // 当optionType 为 request时，请求接口
 *          placeholder: '提示语',
 *          optionList: '数据列',
 *          multiple: '是否多选',
 *          disabled: '禁用'
 *      }
 * }
 */
const props = defineProps({
    setConfig: {
        type: Object,
    },
    modelValue: {
        type: String || Array,
    },
});

const emit = defineEmits(['update:modelValue']);

// 双向绑定内容
const content = ref(props.modelValue);

// 提交更新
const changeValue = (val) => {
    emit('update:modelValue', val);
}
</script>